<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX2 模拟form发送post请求</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("Btn").onclick = function (){
            // 创建XMLHttpRequest对象
            let xml =new XMLHttpRequest();
            // 为xml对象的onreadystatechange赋值
            xml.onreadystatechange = function (){

                if(xml.readyState == 4){
                    // 200 就说明成功
                    if(xml.status == 200){
                        document.getElementById("box").innerText = xml.responseText;
                    }else {
                        alert(xml.status)
                    }
                }else{
                    console.log((xml.readyState));
                }
            }

            // 调用open方法
            xml.open("POST","/AJAX01/ajax2Request",true);

            // 这里的第二个参数的值是form表单的engtype的值.这里的第一个参数必须是ContentType.并且这个方法也必须写在open和send之间才可以.
            xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // 获取username和password
            let username = document.getElementById("username").value;
            let password = document.getElementById("password").value;

            // 调用send方法,这里的格式也要正确.
            xml.send("username="+username+"&password="+password);
        }
    }
</script>

用户名<input type="text" id="username" /><br/>
密码<input type="password" id="password"/><br/>
<input type="button" id="Btn" value="点我提交数据"/>


<div id="box"></div>
</body>
</html>